{% extends "pos/base.html" %}
{% load static %}
{% block title %}{{ purchase_id|yesno:"Edit Purchase,New Purchase" }}{% endblock %}

{% block stylesheets %}

<style>
  /* Hide backend-only columns if needed */
  /*.col-gst, .col-ftax, .col-bonus, .col-batch, .col-expiry { display: none; }*/
  .col-gst, .col-ftax, .col-batch, .col-expiry { display: none; }
  /* Widen Name column */
  th.name-header, td.name-cell { width: 30%; }
  /* Compact inputs */
  #table_products input, #table_products select {
    width:100%; box-sizing:border-box; font-size:.85rem; padding:2px;
  }
  #table_products th, #table_products td {
    vertical-align:middle; font-size:.85rem;
  }
  .delete-row { font-size:1rem; line-height:1; }
  .fixed-footer { padding:6px; }
  /* Product Info Bar */
  #product-info-bar {
    background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 100%) !important;
    border: 1px solid #d0d7de !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    font-size: .82rem;
    transition: opacity .2s;
  }
  #product-info-bar .pib-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 2px 10px;
    white-space: nowrap;
  }
  #product-info-bar .pib-chip b {
    color: #495057;
    font-weight: 600;
  }
  #product-info-bar .pib-chip .pib-val {
    color: #0d6efd;
    font-weight: 700;
  }
  #product-info-bar .pib-chip.pib-stock .pib-val { color: #198754; }
  #product-info-bar .pib-chip.pib-last  .pib-val { color: #dc3545; }
  #product-info-bar .pib-divider {
    width: 1px;
    height: 20px;
    background: #ced4da;
    margin: 0 4px;
  }
  /* Highlight the “Total” column in blue and bold */
  #table_products tbody td.total-cell {
  background-color:#cfe2ff;
  font-weight:600;
  color:#084298;
  font-size:.99rem;
  }

  /* force the input-group children to stay on one line */
  .input-group {
    flex-wrap: nowrap;
  }

  /* override select2’s default full‐width so it flexibly fills the remaining space */
  .select2-container {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0; /* allow it to shrink if needed */
  }

  /* make the select2 “box” match Bootstrap’s form-control height */
  .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
  }

  /* Scope: only inside this bar */
  .one-line-compact .compact-control {
    padding: .22rem .4rem;           /* tighter */
    line-height: 1.2;                 /* tighter */
    border-radius: .2rem;             /* subtle */
  }
  .one-line-compact .input-group.compact-group > .btn {
    padding: .22rem .5rem;            /* tighter button */
    border-radius: .2rem;
  }
  /* Select2: match compact height */
  .one-line-compact .select2-container .select2-selection--single {
    height: calc(1.2em + .44rem + 2px);
    padding: .12rem .35rem;
    line-height: 1.2;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: .2rem;
  }
  .one-line-compact .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.2;
    padding-left: 0;
    font-size: .875rem;
  }
  .one-line-compact .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
  }
</style>

{% endblock %}

{% block content %}
<form method="post" class="purchaseForm"
      action="{% if purchase_id %}{% url 'purchases:purchase_edit' purchase_id %}{% else %}{% url 'purchases:purchase_add' %}{% endif %}">
  {% csrf_token %}

<!-- HEADER FIELDS -->
  <!-- COMPACT ONE-LINE BAR (labels removed, placeholders used) -->
  <div class="row g-1 align-items-center mb-1 one-line-compact">

    <!-- Bill Type -->
    <div class="col-12 col-md-auto">
      <select id="ui_bill_type" class="form-select form-select-sm compact-control" data-placeholder="Bill Type">
        <option value="" selected disabled>Bill Type…</option>
        <option value="vendor_purchase">Vendor Purchase</option>
        <option value="vendor_return">Vendor Return</option>
        <option value="customer_purchase">Customer Purchase</option>
        <option value="customer_return">Customer Return</option>
      </select>
    </div>

    <!-- Party (Select2 + Add) -->
    <div class="col-12 col-md-5 col-lg-4">
      <div class="input-group input-group-sm compact-group">
        <select id="vendor_select" name="vendor" class="form-select select2 compact-control" data-placeholder="Party">
          <option value=""></option>
          <!-- …options… -->
        </select>
        <a href="{% url 'products:vendors_add' %}" target="_blank"
           class="btn btn-outline-primary btn-sm compact-btn d-inline-flex align-items-center justify-content-center"
           title="Add">
          <i class="fas fa-plus"></i>
        </a>

        <a href="{% url 'pos:config_list' %}?type=purchase" target="_blank"
           class="btn btn-sm btn-outline-secondary mr-2 d-inline-flex align-items-center justify-content-center"
           title="Settings">
          <i class="fas fa-cog"></i>
        </a>

        <a href="#"
           class="btn btn-sm btn-outline-secondary mr-2 d-inline-flex align-items-center justify-content-center"
           title="Youtube">
          <i class="fab fa-youtube text-danger fa-lg"></i>
        </a>

      </div>
    </div>

    <!-- Date -->
    <div class="col-6 col-md-auto">
      <input type="date" id="purchase_date" name="date"
             class="form-control form-control-sm compact-control" value="{{ today }}" placeholder="Date">
    </div>

    <!-- Challan # -->
    <div class="col-6 col-md-auto">
      <input type="text" id="challan" name="challan"
             class="form-control form-control-sm compact-control" placeholder="Challan #">
    </div>

    <!-- Remarks (flex fill) -->
    <div class="col-12 col-md col-lg">
      <input type="text" id="remarks" name="remarks"
             class="form-control form-control-sm compact-control" placeholder="Remarks">
    </div>
  </div>


  <!-- PRODUCT INFO BAR -->
  <div id="product-info-bar" class="d-flex align-items-center justify-content-between px-3 py-1 mb-2" style="min-height:34px; display:none !important;">
    <!-- Left: product-specific info -->
    <div class="d-flex align-items-center gap-1 flex-wrap">
      <span class="pib-chip pib-stock">
        <b><i class="fas fa-boxes fa-sm me-1 text-muted"></i>Stock:</b>
        <span class="pib-val" id="pib-stock">—</span>
      </span>
      <span class="pib-chip">
        <b><i class="fas fa-layer-group fa-sm me-1 text-muted"></i>PPP:</b>
        <span class="pib-val" id="pib-ppp">—</span>
      </span>
      <span class="pib-chip pib-last">
        <b><i class="fas fa-tag fa-sm me-1 text-muted"></i>Last Pur:</b>
        <span class="pib-val" id="pib-last-purchase">—</span>
      </span>

      <div class="pib-divider"></div>

      <!-- Bill-level totals -->
      <span class="pib-chip">
        <b><i class="fas fa-cubes fa-sm me-1 text-muted"></i>Items:</b>
        <span class="pib-val" id="pib-total-items">0</span>
      </span>
      <span class="pib-chip">
        <b><i class="fas fa-hashtag fa-sm me-1 text-muted"></i>Total Qty:</b>
        <span class="pib-val" id="pib-total-qty">0</span>
      </span>
    </div>

    <!-- Right: Purchase Report link -->
    <a href="{% url 'purchases:purchases_list' %}" target="_blank"
       class="btn btn-sm btn-outline-primary py-0 px-2 ms-2" style="white-space:nowrap;">
      <i class="fas fa-file-alt me-1"></i>Purchase Report
    </a>
  </div>

  <!-- PRODUCTS TABLE -->
  <div class="table-responsive mb-3">
    <table class="table table-sm table-bordered" id="table_products">
      <thead>
        <tr>
          <th>Action</th><th class="sno">S/No</th><th class="col-code">Code</th>
          <th class="name-header">Name</th><th class="col-speca">Specs</th><th>Qty</th><th>Purchase</th><th class="col-retail">Retail</th>
          <th class="col-gst">Gst</th><th class="col-ftax">F-Tax</th>
          <th class="col-discamt">Disc Amt</th><th class="col-discpct">Disc %</th><th class="col-bonus">Bonus</th>
          <th class="col-batch">Batch</th><th class="col-expiry">Expiry</th><th>Total</th><th class="col-extras">Extras</th>
        </tr>
      </thead>
      <tbody>
        <!-- hidden template row -->
        <tr class="template-row d-none">
          <td><button type="button" class="btn btn-sm btn-danger delete-row">×</button></td>
          <td class="sno"></td>
          <td class="col-code"><input type="text" class="code-input form-control form-control-sm"></td>
          <td class="name-cell">
            <select class="name-select form-control form-control-sm">
              <option value=""></option>
            </select>
          </td>
          <td class="col-speca">
            <select class="speca-select form-control form-control-sm">
              <option value="" selected>Default Variant</option>
            </select>
          </td>

          <td><input type="number" step="any" class="qty-input form-control form-control-sm"></td>
          <td><input type="number" step="any" class="purchase-input form-control form-control-sm"></td>
          <td class="col-retail"><input type="number" step="any" class="retail-input form-control form-control-sm"></td>
          <td class="col-gst"><input type="number" step="any" class="gst-input form-control form-control-sm"></td>
          <td class="col-ftax"><input type="number" step="any" class="ftax-input form-control form-control-sm"></td>
          <td class="col-discamt"><input type="number" step="any" class="discamt-input form-control form-control-sm"></td>
          <td class="col-discpct"><input type="number" step="any" class="discpct-input form-control form-control-sm"></td>
          <td class="col-bonus"><input type="number" step="any" class="bonus-input form-control form-control-sm"></td>
          <td class="col-batch"><input type="text" class="batch-input form-control form-control-sm"></td>
          <td class="col-expiry"><input type="date" class="expiry-input form-control form-control-sm"></td>
          <td class="total-cell text-end">0.00</td>
          <td class="extras-cell col-extras">
            <div class="btn-group btn-group-sm" role="group">
              <button type="button" class="btn btn-outline-secondary btn-add-serials" title="Add Serials">
                <i class="fas fa-barcode"></i>
              </button>
            </div>
            <input type="hidden" class="serials-json" value="[]">
            <input type="hidden" class="is-serial-tracked" value="0">

          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- FOOTER CALCULATIONS -->
<!-- ─── First row: adjustments ─── -->
<div class="row mb-2 g-2 align-items-end">
  <div class="col-md-2">
    <label>Sub Total</label>
    <input readonly id="sub_total" class="form-control form-control-sm">
  </div>
  <div class="col-md-1">
    <label>Disc %</label>
    <input id="flat_disc_pct" class="form-control form-control-sm" type="number" step="any">
  </div>
  <div class="col-md-1">
    <label>Disc Amt</label>
    <input id="flat_disc_amount" class="form-control form-control-sm" type="number" step="any">
  </div>
  <div class="col-md-2">
    <label>Other Expenses</label>
    <input id="other_charges" class="form-control form-control-sm">
  </div>
  <div class="col-md-2">
    <label>Builty Expenses</label>
    <input id="builty_expenses" class="form-control form-control-sm">
  </div>
  <div class="col-md-2">
    <label>Flat GST (%)</label>
    <input id="flat_gst" class="form-control form-control-sm">
  </div>
  <div class="col-md-2">
    <label>F-Tax (%)</label>
    <input id="f_tax" class="form-control form-control-sm">
  </div>
</div>



  <input type="hidden" name="purchase_items" id="purchase_items">
</form>

<nav class="navbar fixed-bottom bg-white border-top fixed-footer">
  <div class="container-fluid d-flex justify-content-between align-items-center">
    <h5 class="m-0">Grand:     <input readonly class="m-0" id="grand_total"></h5>
    <button id="btnSave" class="btn btn-primary">Save Purchase</button>
  </div>
</nav>

<!-- Serials Modal -->
<div class="modal fade" id="serialsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title">Attach Serials</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-2">
        <div class="d-flex justify-content-between small mb-2">
          <div>Required: <span id="sm-required">0</span></div>
          <div>Entered: <span id="sm-entered">0</span></div>
          <div>Remaining: <span id="sm-remaining">0</span></div>
        </div>
        <div class="table-responsive">
          <table class="table table-sm table-bordered mb-2" id="sm-table">
            <thead><tr><th>#</th><th>Barcode / Serial</th><th>Action</th></tr></thead>
            <tbody></tbody>
          </table>
        </div>
        <button class="btn btn-outline-primary btn-sm" id="sm-add-row">Add Row</button>
      </div>
      <div class="modal-footer py-2">
        <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary btn-sm" id="sm-save" disabled>Attach Serials</button>
      </div>
    </div>
  </div>
</div>

<!-- Quick Product Create Modal -->
<div class="modal fade" id="quickProductModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title">Create New Product</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body p-2">
        <form id="quickProductForm">
          <div class="row g-2">

            <div class="col-md-4">
              <label class="small mb-1">Code</label>
              <input type="text" id="qp_code" class="form-control form-control-sm" autocomplete="off">
            </div>

            <div class="col-md-8">
              <label class="small mb-1">Name</label>
              <input type="text" id="qp_name" class="form-control form-control-sm" autocomplete="off">
            </div>

            <div class="col-md-6">
              <label class="small mb-1">Company</label>
              <select id="qp_company" class="form-select form-select-sm">
                <option value="">Select…</option>
              </select>
            </div>

            <div class="col-md-6">
              <label class="small mb-1">Category</label>
              <select id="qp_category" class="form-select form-select-sm">
                <option value="">Select…</option>
              </select>
            </div>

            <div class="col-md-3">
              <label class="small mb-1">Purchase</label>
              <input type="number" step="any" id="qp_purchase" class="form-control form-control-sm">
            </div>

            <div class="col-md-3">
              <label class="small mb-1">Retail</label>
              <input type="number" step="any" id="qp_retail" class="form-control form-control-sm">
            </div>

            <div class="col-md-3">
              <label class="small mb-1">Wholesale</label>
              <input type="number" step="any" id="qp_wholesale" class="form-control form-control-sm">
            </div>

            <div class="col-md-3">
              <label class="small mb-1">Pieces/Pack</label>
              <input type="number" step="1" id="qp_ppp" class="form-control form-control-sm" value="1">
            </div>

          </div>
        </form>
      </div>

      <div class="modal-footer py-2">
        <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary btn-sm" id="qp_save">Save Product</button>
      </div>
    </div>
  </div>
</div>




{% endblock %}

{% block javascripts %}

{{ settings_dict|json_script:"purchase_flags" }}

<script>
  $(function(){
    // Flags from context (setting_dict)
    const PURCHASE_FLAGS = JSON.parse(document.getElementById('purchase_flags')?.textContent || '{}');
    const QP_META_URL  = '{% url "purchases:quick_product_meta" %}';
    const QP_SAVE_URL  = '{% url "purchases:quick_create_product" %}';

    // Code field disable rule: barcode == 0/false and show_purchase_code_column != true
    const CODE_DISABLED =
      (!PURCHASE_FLAGS?.show_purchase_code_column) &&
      (
        PURCHASE_FLAGS?.barcode === 0 ||
        PURCHASE_FLAGS?.barcode === '0' ||
        PURCHASE_FLAGS?.barcode === false ||
        typeof PURCHASE_FLAGS?.barcode === 'undefined' ||
        PURCHASE_FLAGS?.barcode === null
      );
    const WAREHOUSE_DISABLED =
      (!PURCHASE_FLAGS?.show_purchase_warehouse_column);

    // Map: flag → column selector
    const COL_FLAG_MAP = [
      ['show_purchase_code_column',             '.col-code'],
      ['show_purchase_serial_column',           '.sno'],
      ['show_purchase_retail_column',           '.col-retail'],
      ['show_purchase_gst_column',              '.col-gst'],
      ['show_purchase_ftax_column',             '.col-ftax'],
      ['show_purchase_disc_column',             '.col-discamt'],
      ['show_purchase_disc_percent_column',     '.col-discpct'],
      ['show_purchase_bonus_column',            '.col-bonus'],
      ['show_purchase_extras_column',           '.col-extras'],
      ['show_purchase_batch_column',            '.col-batch'],
      ['show_purchase_expiry_column',           '.col-expiry'],
      ['show_purchase_warehouse_column',        '.col-speca'],
    ];

    function openSpecASearch($row){
      const $sel = $row.find('.speca-select');
      if ($sel.data('select2')) $sel.select2('open');
    }

    function applyPickedProduct($row, d){
      $row.find('.serials-json').val('[]');
      setExtrasIcons($row);

      const code = d.product_code || d.code || '';
      updateInfoBar(code);
      $row.find('.code-input').val(code);
      $row.find('.purchase-input').val(d.purchase_price ?? d.purchase ?? '');
      $row.find('.retail-input').val(d.l_sale_price ?? d.retail ?? '');

      // for code-hidden flow (important)
      $row.find('.name-select').data('product_code', code);

      // serial flag + gate
      if (typeof d.is_serial_tracked !== 'undefined') {
        $row.find('.is-serial-tracked').val(
          (d.is_serial_tracked === true || d.is_serial_tracked === 1 || d.is_serial_tracked === '1') ? '1' : '0'
        );
        gateSerialButton($row);
      }

      recalcRow($row);
      recalcAll();

      if (!WAREHOUSE_DISABLED){
        ensureSpecCaches(() => {
          initInlineSpecASelect2($row, '');
          if ((SPEC_A_CACHE || []).length) {
            openSpecASearch($row);
          } else {
            $row.find('.qty-input').focus();
          }
        });
      }else{
        $row.find('.qty-input').focus();
      }
    }

    function isLastVisibleEditableInRow($el){
      const $row = $el.closest('tr');
      const $controls = $row.find('input:visible').not('[type=hidden]');
      const idx = $controls.index($el);
      return idx === $controls.length - 1;
    }

    function applyColumnVisibility(flags){
      COL_FLAG_MAP.forEach(([key, sel]) => {
        const on = !!(flags && flags[key]);
        // Toggle header + all body cells
        // $('#table_products').find('th'+sel+', td'+sel).toggle(on);
        const $cells = $('#table_products').find('th'+sel+', td'+sel);
        $cells.each(function(){
          // force table layout correctly
          this.style.setProperty('display', on ? 'table-cell' : 'none', 'important');
        });

        // If hiding numeric/text/date inputs, clear values to avoid stale totals
        // Never clear code; backend depends on it even if column hidden
        if (!on && sel !== '.col-extras' && sel !== '.col-code'){
          $('#table_products tbody').find('td'+sel+' input').each(function(){
            if (this.type === 'number')    $(this).val('');
            else if (this.type === 'text') $(this).val('');
            else if (this.type === 'date') $(this).val('');
          });
        }
      });

      // Recalc after any structural change
      if (typeof recalcAll === 'function') recalcAll();
    }

    function openNameSearch($row){
      const $sel = $row.find('.name-select');
      if (!$sel.data('select2')) {
        // safety: init if not already
        $sel.select2({ theme:'bootstrap4', width:'100%' });
      }
      $sel.select2('open');
      setTimeout(() => {
        const fld = document.querySelector('.select2-container--open .select2-search__field');
        if (fld) fld.focus();
      }, 0);
    }

    const common = { theme: 'bootstrap4', width: '100%' };

    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

    window.__INITIAL_PURCHASE__ = {{ initial_purchase_json|default:"null"|safe }};

    const SPEC_URL = '{% url "purchases:get_spec_terms" %}';
    let SPEC_A_CACHE = null;
    let SPEC_B_CACHE = null;

    let __lastFocusInTable = null;
    $('#table_products').on('focusin', 'input:visible', function(){
      const $cur = $(this);
      const $prev = __lastFocusInTable;
      __lastFocusInTable = $cur;

      if ($prev && $prev.hasClass('code-input')) {
        const $row = $prev.closest('tr');
        const codeVal = ($prev.val() || '').trim();

        if (CODE_DISABLED || !codeVal) {
          setTimeout(() => openNameSearch($row), 0);
        }
      }
    });

    // If code field is effectively disabled by settings, redirect any focus to Name select2
    $('#table_products').on('focusin', '.code-input', function(){
      if (!CODE_DISABLED) return;
      const $row = $(this).closest('tr');
      setTimeout(() => openNameSearch($row), 0);
    });

    function normalizeSpecPayload(data){
      const arr = Array.isArray(data) ? data : (Array.isArray(data.results) ? data.results : []);
      return arr.map(it => ({
        id:   it.id ?? it.value ?? it.name,
        text: it.text ?? it.label ?? it.name
      }));
    }

    /// AJAX Select2 initializer for SpecTerm A/B
    function initSpecSelect2($select, type, selectedId){
      if ($select.data('select2')) { $select.off('select2:open').select2('destroy'); }
      $select.empty();

      $select.select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Select…',
        minimumInputLength: 0,
        ajax: {
          url: SPEC_URL,
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 200,
          data: params => ({ type, term: params.term || '' }),
          processResults: data => ({ results: normalizeSpecPayload(data) }),
          cache: true
        }
      }).on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      });

      // Optional: preselect on edit
      if (selectedId != null && selectedId !== '') {
        const cache = (type === 'A') ? SPEC_A_CACHE : SPEC_B_CACHE;
        const found = cache && cache.find(it => String(it.id) === String(selectedId));
        const opt   = new Option(found ? found.text : String(selectedId), String(selectedId), true, true);
        $select.append(opt).trigger('change');
      }
    }

    function fetchSpecTerms(type){
      return $.ajax({
        url: SPEC_URL,
        type: 'POST',
        headers: { 'X-CSRFToken': csrftoken },
        data: { type }
      }).then(resp => normalizeSpecPayload(resp));
    }

    function ensureSpecCaches(cb){
      // each leg returns a *promise*
      const pA = SPEC_A_CACHE
        ? $.Deferred().resolve().promise()
        : fetchSpecTerms('A').then(list => { SPEC_A_CACHE = list; });

      const pB = SPEC_B_CACHE
        ? $.Deferred().resolve().promise()
        : fetchSpecTerms('B').then(list => { SPEC_B_CACHE = list; });

      const whenAll = $.when(pA, pB);   // jQuery Deferred with .done/.fail/.always
      if (typeof cb === 'function') whenAll.done(cb);
      return whenAll;                    // <-- IMPORTANT: now callers can chain .done/.always
    }


    function fillSpecSelect($select, items, selectedId){
      $select.empty();
      $select.append(new Option('', '', true, false));
      items.forEach(it => $select.append(new Option(it.text, it.id)));

      if ($select.data('select2')) {
        $select.off('select2:open').select2('destroy');
      }
      $select.select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Select...'
      }).on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      });

      if (selectedId != null && selectedId !== '') {
        $select.val(String(selectedId)).trigger('change');
      }
    }

    // 3) Party Select2
    function billTypeParty(bt) {
      return (bt === 'vendor_purchase' || bt === 'vendor_return') ? 'vendor' : 'customer';
    }

    function initPartySelect2(){
      const bt   = $('#ui_bill_type').val();
      const type = billTypeParty(bt);
      const url  = type === 'vendor'
        ? '{% url "purchases:get_vendors" %}'
        : '{% url "customers:get_customers" %}';

      if ($('#vendor_select').data('select2')) {
        $('#vendor_select').select2('destroy');
      }

      $('#vendor_select').select2({
        ...common,
        placeholder: type === 'vendor' ? 'Search vendor…' : 'Search customer…',
        minimumInputLength: 1,
        allowClear: true,
        dropdownParent: $(document.body),
        ajax: {
          url: url,
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 250,
          data: params => ({ term: params.term }),
          processResults: data => {
            let items = Array.isArray(data) ? data
              : Array.isArray(data.results) ? data.results : [];
            const mapped = items.map(v => ({
              id:   v.value ?? v.id,
              text: v.label ?? v.text
            }));
            return { results: mapped };
          },
          cache: true
        },
        templateResult: r => r.loading ? r.text : $('<div>'+r.text+'</div>'),
        templateSelection: r => r.text
      })
      .on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      })
      .on('select2:select', () => {
        // $('#table_products tbody tr:not(.template-row)').first().find('.code-input').focus();
        if (CODE_DISABLED) openNameSearch($('#table_products tbody tr:not(.template-row)').last());
        else $('#table_products tbody tr:not(.template-row)').last().find('.code-input').focus();


      });
    }

    setTimeout(() => $('#vendor_select').select2('open'), 0);


    function addRow(data = {}) {
      // 1) Clone & append
      const $row = $('.template-row')
        .clone()
        .removeClass('template-row d-none');
      $('#table_products tbody').append($row);

      // 2) Renumber S/No
      $('#table_products tbody tr:not(.template-row)').each((i, tr) => {
        $(tr).find('.sno').text(i + 1);
      });

      // 3) Initialize all inputs to data if keys match exactly
      Object.entries(data).forEach(([k, v]) => {
        const $inp = $row.find('.' + k + '-input');
        if ($inp.length) $inp.val(v);
      });

      // 5) Init the Name-Select2 as before
      const $nameSel = $row.find('.name-select');

      $nameSel.select2({
        ...common,
        placeholder: 'Search product…',
        minimumInputLength: 1,
        allowClear: true,
        tags: false,

        ajax: {
          url: '{% url "products:get_products" %}',
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 250,
          data: params => ({ term: params.term }),
          processResults: (resp, params) => {
            const results = Array.isArray(resp) ? resp : (resp.results || []);
            const term = (params.term || '').trim();
            // Only show "Create" when no results match
            if (term && results.length === 0) {
              results.push({
                id: '__create__:' + term,
                text: term,
                newTag: true
              });
            }
            return { results };
          }
        },

        templateResult: r => {
          if (r.loading) return r.text;
          if (r.newTag) {
            return $(`<div class="text-primary"><i class="fas fa-plus"></i> Create: <strong>${r.text}</strong></div>`);
          }
          return $(`
            <div>
              <strong>${r.text}</strong><br/>
              <small>${r.category || ''}</small><br/>
              <span>$${r.l_sale_price ?? ''}</span>
            </div>
          `);
        },
        templateSelection: r => r.text
      })
      .on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      })
      .on('select2:select', e => {
        const d = e.params.data;

        // ✅ if user selected "create new"
        if (d && d.newTag) {
          // clear selection
          $nameSel.val(null).trigger('change');
          qpOpen({ $row, name: d.text });
          return;
        }

        // normal pick
        applyPickedProduct($row, d);
      });

      // init Specs (SpecTerm A) - 1 variant per line
      // ensureSpecCaches(() => initInlineSpecASelect2($row, data.spec_a_id ?? data.spec_a ?? ''));

      // 5) If we passed in data.id & data.text, pre-select that option
      if (data.prod_id && data.name) {
        const preopt = new Option(data.name, data.prod_id, true, true);
        $nameSel.append(preopt).trigger('change');
      }



      // 4) Now explicitly handle aliases for qty / purchase / retail
      //    (so both data.qty and data.quantity work, etc.)
      const qtyVal      = data.qty           ?? data.quantity       ?? '';
      const purchVal    = data.purchase      ?? data.purchase_price ?? '';
      const retailVal   = data.retail        ?? data.l_sale_price   ?? '';
      const discAmtVal  = data.disc_amt      ?? data.discount       ?? '';
      const discPctVal  = data.disc_pct      ?? data.disc           ?? '';
      const bonusVal    = data.bonus         ?? data.bonus_qty      ?? '';
      const batchVal    = data.batch         ?? '';
      const expiryVal   = data.expiry        ?? '';

      $row.find('.qty-input').val(qtyVal);
      $row.find('.purchase-input').val(purchVal);
      $row.find('.retail-input').val(retailVal);
      $row.find('.discamt-input').val(discAmtVal);
      $row.find('.discpct-input').val(discPctVal);
      $row.find('.bonus-input').val(bonusVal);
      $row.find('.batch-input').val(batchVal);
      $row.find('.expiry-input').val(expiryVal);


      // [Δ1] Hydrate variants/serials when opening in EDIT mode
      const sList  = Array.isArray(data.serials) ? data.serials : [];

      $row.find('.serials-json').val(JSON.stringify(sList));

      // if serials are present from previous save, allow opening the serials modal
      if (sList.length > 0) {
        $row.find('.is-serial-tracked').val('1');
      }

      if (data.is_serial_tracked != null) {
        $row.find('.is-serial-tracked').val(data.is_serial_tracked ? '1' : '0');
      }

      // refresh icons + gating now that JSON is present
      setExtrasIcons($row);
      gateSerialButton($row);

      // 7) Final recalc & return
      recalcRow($row);
      recalcAll();
      afterAddRow($row);
      // ensure visibility rules apply to newly added row(s)
      applyColumnVisibility(PURCHASE_FLAGS);

      // ✅ restore spec on edit AFTER product is set
      const _spec_id = (data.spec_a_id != null) ? String(data.spec_a_id) : '';
      ensureSpecCaches(() => initInlineSpecASelect2($row, _spec_id));



      return $row;
    }

    // 5) Start with one blank row
    addRow();
    // Apply flags on initial render
    applyColumnVisibility(PURCHASE_FLAGS);

    // 6) Delete‐row handler
    $('#table_products').on('click', '.delete-row', function () {
      const $row  = $(this).closest('tr');
      const $rows = $('#table_products tbody tr:not(.template-row)');

      // 1) Guard: at least one row must remain
      if ($rows.length <= 1) {
        Swal.fire('At least one row is required', '', 'info');
        return;
      }

      // 2) Decide where to focus after delete (next -> prev -> last fallback)
      const $next = $row.nextAll(':not(.template-row)').first();
      const $prev = $row.prevAll(':not(.template-row)').first();

      $row.remove();

      // 3) Renumber S/No
      $('#table_products tbody tr:not(.template-row)').each((i, tr) => {
        $(tr).find('.sno').text(i + 1);
      });

      // 4) Recalc totals
      recalcAll();

      // 5) Restore a sensible focus
      const $target = $next.length ? $next : ($prev.length ? $prev : $('#table_products tbody tr:not(.template-row)').last());
      if (typeof CODE_DISABLED !== 'undefined' && CODE_DISABLED) {
        // if code is disabled by settings → open Name select2 search
        openNameSearch($target);
      } else {
        // otherwise focus code input if present
        const $code = $target.find('.code-input');
        if ($code.length) $code.focus();
        else openNameSearch($target); // fallback
      }
    });


    // 7) Code → lookup on Enter
    $('#table_products').on('keydown','.code-input',function(e){
      if (e.which===13){
        e.preventDefault();
        const $r = $(this).closest('tr'), code = $(this).val().trim();
        if (!code){
          $r.find('.name-select').select2('open');
          return;
        }
      $.get("{% url 'products:search_product' %}", { product_code: code }, resp => {
      if (resp.error) {
        Swal.fire({
          icon: 'error',
          title: 'Code not found',
          text: resp.error,
          showCancelButton: true,
          confirmButtonText: 'Create New Product',
          cancelButtonText: 'Cancel'
        }).then(r => {
          if (r.isConfirmed){
            qpOpen({ $row: $r, code: code });
          }
        });
      } else {
        $r.find('.name-select')
          .append(new Option(resp.name, resp.id, true, true))
          .trigger('change');

        applyPickedProduct($r, resp);
      }

      });

      }
    });

    // 8) Per‐row recalculation
    function recalcRow($r){

      const codeVal = $r.find('.code-input').val().trim();
      if (!codeVal) {
        // no product code entered → clear this row’s total but do not bubble up
        $r.find('.total-cell').text('0.00');
        return;
      }


      const q   = parseFloat($r.find('.qty-input').val())||0;
      const p   = parseFloat($r.find('.purchase-input').val())||0;
      const g   = parseFloat($r.find('.gst-input').val())||0;
      const f   = parseFloat($r.find('.ftax-input').val())||0;
      const da  = parseFloat($r.find('.discamt-input').val())||0;
      const dp  = parseFloat($r.find('.discpct-input').val())||0;
      const b   = parseFloat($r.find('.bonus-input').val())||0;

      const full = q*p;
      const tax  = full*(g+f)/100;
      const net  = full + tax - da;
      // const dis_per_amt = full * 0.01 * dp
      const tot  = net;
      // if (dp > 0){
      //   $r.find('.discamt-input').val(dis_per_amt);
      // }
      $r.find('.total-cell').text(tot.toFixed(2));
    }

    function handlePctChange($r){
      const q   = parseFloat($r.find('.qty-input').val())||0;
      const p   = parseFloat($r.find('.purchase-input').val())||0;
      const g   = parseFloat($r.find('.gst-input').val())||0;
      const f   = parseFloat($r.find('.ftax-input').val())||0;
      const da  = parseFloat($r.find('.discamt-input').val())||0;
      const dp  = parseFloat($r.find('.discpct-input').val())||0;
      const b   = parseFloat($r.find('.bonus-input').val())||0;

      const full = q*p;
      const tax  = full*(g+f)/100;
      const net  = full + tax;
      const dis_per_amt = full * 0.01 * dp
      // const tot  = net*(1-dp/100);
      $r.find('.discamt-input').val(dis_per_amt.toFixed(2));
      // $r.find('.discamt-input').val(dis_per_amt);
      // $r.find('.total-cell').text(tot.toFixed(2));
      recalcRow($r);
      recalcAll();
    }

    // 9) Recalc all & grand total
    function recalcAll(){
      // 1) Sum all row totals
      let sub = 0;
      $('#table_products tbody tr:not(.template-row)').each(function(){
        sub += parseFloat($(this).find('.total-cell').text()) || 0;
      });
      $('#sub_total').val(sub.toFixed(2));

      // 2) Read adjustment fields
      const fd  = parseFloat($('#flat_disc_amount').val()) || 0;  // flat discount amount
      const oe  = parseFloat($('#other_charges').val())  || 0;  // other expenses
      const be  = parseFloat($('#builty_expenses').val()) || 0;  // builty expenses (not in grand total)
      const gst = parseFloat($('#flat_gst').val())        || 0;  // flat GST %
      const ft  = parseFloat($('#f_tax').val())           || 0;  // F-Tax %

      // 3) Base for taxes and total
      //    – Builty Expenses (be) is intentionally NOT added here
      const base    = sub - fd + oe;
      const taxGst  = base * (gst / 100);
      const taxF    = base * (ft  / 100);
      const grand   = base + taxGst + taxF;

      // 4) Display
      $('#grand_total').val(grand.toFixed(2));
      recalcInfoBarTotals();
    }

    // ─── hook up live recalculation ───
    // Disc % → compute Disc Amount, then recalc
    $('#flat_disc_pct').on('keyup change', function(){
      const sub = parseFloat($('#sub_total').val()) || 0;
      const pct = parseFloat($(this).val()) || 0;
      const amt = sub * pct / 100;
      $('#flat_disc_amount').val(amt.toFixed(2));
      recalcAll();
    });

    // Disc Amount → compute Disc %, then recalc
    $('#flat_disc_amount').on('keyup change', function(){
      const sub = parseFloat($('#sub_total').val()) || 0;
      const amt = parseFloat($(this).val()) || 0;
      const pct = sub ? (amt / sub * 100) : 0;
      $('#flat_disc_pct').val(pct.toFixed(2));
      recalcAll();
    });

    $('#other_charges, #builty_expenses, #flat_gst, #f_tax')
      .on('keyup change', recalcAll);

    // call once on page load
    recalcAll();

    // 10) Any input → recalc
    $('#table_products').on('input', 'input:not(.discpct-input)', function(){
      recalcRow($(this).closest('tr')); recalcAll();
    });

    $('#table_products').on('input', '.discpct-input', function(){
      const $row = $(this).closest('tr');
      handlePctChange($row);
      // agar overall tot bhi update karna hai:
      recalcAll();
    });


    // 11) Enter moves focus; on Bonus → add new row (if Code & Qty present)

    // Mobile soft-keyboard "Next": if user jumps from last visible cell to footer,
    // create a new row (same behavior as desktop Enter on last cell)
    const FOOTER_FIELDS = '#flat_discount, #other_charges, #builty_expenses, #flat_gst, #f_tax';

    let __footerPointer = false;
    // Agar user ne click/tap kiya hai to guard ON kar dein
    $(document).on('pointerdown mousedown touchstart', FOOTER_FIELDS, function(){
      __footerPointer = true;
    });

    $(document).on('focusin', FOOTER_FIELDS, function(){
      if (__footerPointer) { __footerPointer = false; return; }

      const $prev = __lastFocusInTable;
      if (!$prev || !$prev.length) return;
      if (!isLastVisibleEditableInRow($prev)) return;

      const $row = $prev.closest('tr');
      tryAddOrFocusNewRow($row);
    });



    // Helper: does row have a product selected?
    function isRowFilled($row) {
      let code = ($row.find('.code-input').val() || '').trim();
      if (!code) {
        const selCode = $row.find('.name-select').data('product_code');
        if (selCode) code = String(selCode);
      }
      return !!code;
    }

    function focusRowStart($row) {
      if (CODE_DISABLED) openNameSearch($row);
      else $row.find('.code-input').focus();
    }

    function tryAddOrFocusNewRow($currentRow) {
      let codeVal = ($currentRow.find('.code-input').val() || '').trim();
      if (!codeVal) {
        const selCode = $currentRow.find('.name-select').data('product_code');
        if (selCode) codeVal = String(selCode);
      }
      const qtyVal = parseFloat($currentRow.find('.qty-input').val()) || 0;
      if (!codeVal || qtyVal <= 0) return; // don't create row if current row incomplete

      // If last row is already empty → just focus it
      const $lastRow = $('#table_products tbody tr:not(.template-row)').last();
      if (!$currentRow.is($lastRow) && !isRowFilled($lastRow)) {
        focusRowStart($lastRow);
        return;
      }
      if ($currentRow.is($lastRow) && !isRowFilled($lastRow) && !codeVal) {
        return; // shouldn't happen since codeVal check above, but guard
      }

      const $new = addRow();
      focusRowStart($new);
    }

    $('#table_products').on('keydown', 'input, .name-select', function(e) {
      if (e.which !== 13) return;
      e.preventDefault();

      const $row = $(this).closest('tr');

      // Move to next visible control in the same row
      const $controls = $row.find('input:visible').not('[type=hidden]');
      const idx = $controls.index(this);
      if (idx < $controls.length - 1) {
        $controls.eq(idx + 1).focus();
      } else {
        // Last visible field in row → try add/focus new row
        tryAddOrFocusNewRow($row);
      }
    });

    // Arrow-key navigation in the products table
    $('#table_products').on('keydown', 'input:visible, select:visible', function(e) {
      const LEFT  = 37;
      const RIGHT = 39;
      if (e.which !== LEFT && e.which !== RIGHT) return;

      e.preventDefault();
      // find all visible form-controls in order
      const $controls = $('#table_products')
        .find('input:visible, select:visible')
        .not('.template-row input, .template-row select');
      const idx = $controls.index(this);
      const targetIdx = (e.which === RIGHT) ? idx + 1 : idx - 1;

      if (targetIdx >= 0 && targetIdx < $controls.length) {
        $controls.eq(targetIdx).focus();
      }
    });


    // Up/Down arrow navigation in the products table
    $('#table_products').on('keydown', 'input:visible, select:visible', function(e) {
      const UP   = 38;
      const DOWN = 40;
      if (e.which !== UP && e.which !== DOWN) return;

      e.preventDefault();
      const $cell     = $(this).closest('td');
      const colIndex  = $cell.index();
      const $rows     = $('#table_products tbody tr').not('.template-row');
      const rowIndex  = $rows.index( $cell.closest('tr') );
      const targetRow = (e.which === DOWN)
        ? $rows.eq(rowIndex + 1)
        : $rows.eq(rowIndex - 1);

      if (!targetRow.length) return;  // no row above/below
      const $targetCell = targetRow.find('td').eq(colIndex);
      const $ctrl       = $targetCell.find('input:visible, select:visible').first();
      if (!$ctrl.length) return;

      $ctrl.focus();
    });

    // 12) Save button
    $('#btnSave').click(()=>{
      if (!$('#vendor_select').val()) {
        Swal.fire('Please select a party','','warning'); return;
      }
      const payload = {
        ui_bill_type:  $('#ui_bill_type').val(),
        vendor:        $('#vendor_select').val(),  // party id
        date:          $('#purchase_date').val(),
        challan:       $('#challan').val(),
        remarks:       $('#remarks').val(),
        flat_discount: $('#flat_disc_amount').val(),
        builty_expenses: $('#builty_expenses').val(),
        other_charges: $('#other_charges').val(),
        flat_gst:      $('#flat_gst').val(),
        f_tax:         $('#f_tax').val(),
        grand_total:   $('#grand_total').val(),
        sub_total:     $('#sub_total').val(),
        items:         []
      };
      let has_valid_row = false;
      $('#table_products tbody tr:not(.template-row)').each(function(){
        const $r = $(this);
        let code = ($r.find('.code-input').val() || '').trim();
        const qty = parseFloat($r.find('.qty-input').val()) || 0;

        if (!code) {
          const selCode = $r.find('.name-select').data('product_code');
          if (selCode) code = String(selCode);
        }

        if (code && qty > 0) {
          has_valid_row = true;
          let specVal = ($r.find(".speca-select").val() || "").trim();
          if (specVal.startsWith('__create__:')) specVal = '';
          payload.items.push({
            code:     code,  // ← use resolved code
            name:     $r.find('.name-select').select2('data')[0]?.text || '',
            qty:      $r.find('.qty-input').val(),
            purchase: $r.find('.purchase-input').val(),
            retail:   $r.find('.retail-input').val(),
            gst:      $r.find('.gst-input').val(),
            f_tax:    $r.find('.ftax-input').val(),
            disc_amt: $r.find('.discamt-input').val(),
            disc_pct: $r.find('.discpct-input').val(),
            bonus:    $r.find('.bonus-input').val(),
            batch:    $r.find('.batch-input').val(),
            expiry:   $r.find('.expiry-input').val(),
            total:    $r.find('.total-cell').text(),
            spec_a_id: specVal,
            serials: JSON.parse($r.find('.serials-json').val() || '[]')
          });
        }

      });

      if (!has_valid_row) {
        Swal.fire('Please add at least one valid item to Save this Bill.', '', 'warning');
        return;
      }

      $('#purchase_items').val(JSON.stringify(payload));
      $('.purchaseForm').submit();
    });

    $(document).on('keydown', function(e) {
      // support both Windows/Linux (ctrlKey) and Mac (metaKey)
      if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.keyCode === 83)) {
        e.preventDefault();                 // stop the browser “Save page” dialog
        $('#btnSave').trigger('click');     // fire your existing save logic
      }
    });

    // Set Bill Type default (create) OR from server prefill (edit)
    let defaultBT = "{{ initial_ui_bill_type|default:'vendor_purchase' }}";

    // If editing, lock the dropdown (we’ll detect via initial json)
    {% if initial_purchase_json %}
      const _init = {{ initial_purchase_json|safe }};
      if (_init.ui_bill_type) defaultBT = _init.ui_bill_type;
      $('#ui_bill_type').val(defaultBT).prop('disabled', true);
    {% else %}
      $('#ui_bill_type').val(defaultBT);
    {% endif %}

    // Initialize Party Select2 for current bill type
    initPartySelect2();

    // When bill type changes (create mode), reset party and re-init AJAX
    $('#ui_bill_type').on('change', function(){
      $('#vendor_select').val(null).trigger('change');
      initPartySelect2();
    });

    // Optionally open the dropdown on load for quick UX
    setTimeout(() => $('#vendor_select').select2('open'), 0);

    // 13) Prefill on edit
    {% if initial_purchase_json %}
    const init = {{ initial_purchase_json|safe }};

    // lock bill type + set value
    if (init.ui_bill_type) {
      $('#ui_bill_type').val(init.ui_bill_type).prop('disabled', true);
      initPartySelect2();  // ensure correct AJAX endpoint
    }

    // pre-pick party
    let partyOpt = new Option(init.vendor_name, init.vendor, true, true);
    $('#vendor_select').append(partyOpt).trigger('change');

    // rest of the fields
    $('#purchase_date').val(init.date);
    $('#challan').val(init.challan);
    $('#remarks').val(init.remarks);
    $('#flat_disc_amount').val(init.flat_discount);
    // Back-calculate the percentage
    const _prefillSub = parseFloat($('#sub_total').val()) || 0;
    if (_prefillSub) {
      $('#flat_disc_pct').val((parseFloat(init.flat_discount || 0) / _prefillSub * 100).toFixed(2));
    }
    $('#builty_expenses').val(init.builty_expenses);
    $('#other_charges').val(init.other_charges);
    $('#flat_gst').val(init.flat_gst);
    $('#f_tax').val(init.f_tax);

    // rows
    $('#table_products tbody tr:not(.template-row)').remove();
    init.items.forEach(item => addRow(item));
    applyColumnVisibility(PURCHASE_FLAGS);

    {% endif %}

    recalcAll();

    function initInlineSpecASelect2($row, selectedVal){
      const $sel = $row.find('.speca-select');

      if ($sel.data('select2')) {
        $sel.off('select2:open').select2('destroy');
      }

      // Always keep Default Variant at top
      $sel.empty().append(new Option('Default Variant', '', true, false));

      $sel.select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Default Variant',
        minimumInputLength: 0,
        allowClear: false,
        tags: false,

        createTag: function(params){
          const term = (params.term || '').trim();
          if (!term) return null;
          return { id: '__create__:' + term, text: term, newTag: true };
        },

        ajax: {
          url: SPEC_URL,
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 200,
          data: params => ({ type: 'A', term: params.term || '' }),
          processResults: data => ({ results: normalizeSpecPayload(data) }),
          cache: true
        },

        templateResult: r => {
          if (r.loading) return r.text;
          if (r.newTag) {
            return $(`<div class="text-primary"><i class="fas fa-plus"></i> Create: <strong>${r.text}</strong></div>`);
          }
          return $(`<div>${r.text}</div>`);
        },
        templateSelection: r => r.text
      })
      .on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      })
      .on('select2:select', e => {
        $row.find('.qty-input').focus();

      });

      // Preselect on edit
      if (selectedVal != null && String(selectedVal).trim() !== '') {
        // If cache already has label, use it; else show id as fallback (still works)
        const found = (SPEC_A_CACHE || []).find(x => String(x.id) === String(selectedVal));
        const opt = new Option(found ? found.text : String(selectedVal), String(selectedVal), true, true);
        $sel.append(opt).trigger('change');
      } else {
        $sel.val('').trigger('change');
      }
    }

    // ---------- Helpers for Extras ----------
    function rowQtyBonus($row){
      const q = parseFloat($row.find('.qty-input').val()) || 0;
      const b = parseFloat($row.find('.bonus-input').val()) || 0;
      return {q, b, total: q + b};
    }

    function setExtrasIcons($row){
      const hasSer = JSON.parse($row.find('.serials-json').val() || '[]').length > 0;
      $row.find('.btn-add-serials').toggleClass('btn-success', hasSer);
    }
    
    function gateSerialButton($row){
      const serialTracked = ($row.find('.is-serial-tracked').val() === '1');
      const { total } = rowQtyBonus($row);
      const $btn = $row.find('.btn-add-serials');
      if (serialTracked && total > 0) {
        $btn.prop('disabled', false).attr('title', 'Add Serials');
      } else {
        $btn.prop('disabled', true).attr('title', serialTracked ? 'Enter Qty/Bonus first' : 'Product is not serial-tracked');
      }
    }

    // On any qty/bonus change, re-gate buttons
    $('#table_products').on('input', '.qty-input, .bonus-input', function(){
      const $row = $(this).closest('tr');
      gateSerialButton($row);
    });

    // When product is picked, set is_serial_tracked on that row
    $('#table_products').on('select2:select', '.name-select', function(e){
      const $row = $(this).closest('tr');
      const d = e.params.data || {};
      const track = d.is_serial_tracked ? '1' : '0';
      $row.find('.is-serial-tracked').val(track);
      gateSerialButton($row);
    });

    // Also when code → lookup fills product
    // (hook into your existing code lookup success)
    function _afterProductLookupFillRow($r, resp){
      $r.find('.is-serial-tracked').val(resp.is_serial_tracked ? '1' : '0');
      gateSerialButton($r);
      setExtrasIcons($r);
    }

    // ---------- Serials Modal ----------
    let SM_ctx = { $row: null, required: 0 };

    function sm_recalc(){
      const n = $('#sm-table tbody tr').length;
      $('#sm-entered').text(n);
      const rem = Math.max(0, (SM_ctx.required - n));
      $('#sm-remaining').text(rem);
      $('#sm-save').prop('disabled', rem !== 0);
      $('#sm-table tbody tr').each(function(i){ $(this).find('.sm-sno').text(i+1); });
    }

    $('#sm-add-row').on('click', function(){
      const $tr = $(`
        <tr>
          <td class="sm-sno"></td>
          <td><input type="text" class="form-control form-control-sm sm-serial" placeholder="Scan/Enter serial"></td>
          <td><button type="button" class="btn btn-sm btn-danger sm-del">&times;</button></td>
        </tr>
      `);
      $('#sm-table tbody').append($tr);
      sm_recalc();
    });

    $('#sm-table').on('click', '.sm-del', function(){ $(this).closest('tr').remove(); sm_recalc(); });

    $('#table_products').on('click', '.btn-add-serials', function(){
      const $row = $(this).closest('tr');
      const serialTracked = ($row.find('.is-serial-tracked').val() === '1');
      const { total } = rowQtyBonus($row);
      if (!serialTracked) { Swal.fire('This product is not serial-tracked','','info'); return; }
      if (!total) { Swal.fire('Enter Qty/Bonus first','','info'); return; }

      SM_ctx.$row = $row;
      SM_ctx.required = total;
      $('#sm-required').text(total); $('#sm-entered').text(0); $('#sm-remaining').text(total);
      $('#sm-table tbody').empty();

      const existing = JSON.parse($row.find('.serials-json').val() || '[]');
      if (existing.length){
        existing.forEach(s => { $('#sm-add-row').trigger('click'); $('#sm-table tbody tr').last().find('.sm-serial').val(s.serial_no); });
        sm_recalc();
      }
      $('#serialsModal').modal('show');
    });

    $('#sm-save').on('click', function(){
      const uniq = new Set();
      const rows = [];
      let dup = null;
      $('#sm-table tbody tr').each(function(){
        const code = ($(this).find('.sm-serial').val()||'').trim();
        if (!code) return;
        if (uniq.has(code)) dup = code;
        uniq.add(code);
        rows.push({serial_no: code});
      });
      if (dup){
        Swal.fire('Duplicate serial: '+dup,'','error'); return;
      }
      SM_ctx.$row.find('.serials-json').val(JSON.stringify(rows));
      setExtrasIcons(SM_ctx.$row);
      $('#serialsModal').modal('hide');
    });

    // Gate on add row too
    $('#table_products').on('click', '.btn-add-serials', function(){
      const $row = $(this).closest('tr');
      gateSerialButton($row);
    });

    // Whenever a row is added, initialize icons + gating
    function afterAddRow($row){
      setExtrasIcons($row);
      gateSerialButton($row);
    }


    let __QP = {
      $row: null,
      metaLoaded: false,
    };

    function qpLoadMeta(){
      if (__QP.metaLoaded) return $.Deferred().resolve().promise();

      return $.get(QP_META_URL).then(resp => {
        const $c1 = $('#qp_company');
        const $c2 = $('#qp_category');

        $c1.empty().append(new Option('Select…', ''));
        (resp.companies || []).forEach(x => $c1.append(new Option(x.text, x.id)));

        $c2.empty().append(new Option('Select…', ''));
        (resp.categories || []).forEach(x => $c2.append(new Option(x.text, x.id)));

        __QP.metaLoaded = true;
      });
    }

    function qpOpen({ $row, code='', name='' }){
      __QP.$row = $row;

      $('#qp_code').val(code || '');
      $('#qp_name').val(name || '');
      $('#qp_purchase').val('');
      $('#qp_retail').val('');
      $('#qp_wholesale').val('');
      $('#qp_ppp').val('1');

      qpLoadMeta().always(() => {
        $('#quickProductModal').modal('show');
        setTimeout(() => {
          // requirement: focus Name (especially when code prefilled)
          $('#qp_name').focus().select();
        }, 150);
      });
    }

    $('#qp_save').on('click', function(){
      const payload = {
        code: $('#qp_code').val().trim(),
        name: $('#qp_name').val().trim(),
        company_id: $('#qp_company').val(),
        category_id: $('#qp_category').val(),
        purchase: $('#qp_purchase').val(),
        retail: $('#qp_retail').val(),
        wholesale: $('#qp_wholesale').val(),
        pieces_per_pack: $('#qp_ppp').val(),
      };

      if (!payload.code) { Swal.fire('Code required','','warning'); $('#qp_code').focus(); return; }
      if (!payload.name) { Swal.fire('Name required','','warning'); $('#qp_name').focus(); return; }

      $.ajax({
        url: QP_SAVE_URL,
        type: 'POST',
        headers: { 'X-CSRFToken': csrftoken },
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(payload),
        success: function(resp){
          const $row = __QP.$row;
          if (!$row || !$row.length) { $('#quickProductModal').modal('hide'); return; }

          // select2 option add + select
          const $sel = $row.find('.name-select');
          $sel.append(new Option(resp.name, resp.id, true, true)).trigger('change');

          // fill row + focus qty
          applyPickedProduct($row, resp);

          $('#quickProductModal').modal('hide');
          setTimeout(() => $row.find('.qty-input').focus(), 50);
        },
        error: function(xhr){
          const msg = (xhr.responseJSON && xhr.responseJSON.error) ? xhr.responseJSON.error : 'Failed to create product';
          Swal.fire('Error', msg, 'error');
        }
      });
    });

    // ✅ Enter key: next field focus; last field -> save
    $('#quickProductModal').on('keydown', 'input, select', function(e){
      if (e.which !== 13) return;
      e.preventDefault();

      const $fields = $('#quickProductForm')
        .find('input, select')
        .filter(':visible:not([disabled])');

      const idx = $fields.index(this);
      if (idx >= 0 && idx < $fields.length - 1){
        $fields.eq(idx + 1).focus();
      } else {
        $('#qp_save').trigger('click');
      }
    });



// ─── Product Info Bar ───
    const INFO_BAR_URL = '{% url "purchases:product_info_bar" %}';
    const __infoBarCache = {};
    let __infoBarLastCode = '';

    function updateInfoBar(productCode) {
      if (!productCode) {
        $('#product-info-bar').css('display', 'none');
        __infoBarLastCode = '';
        return;
      }
      if (productCode === __infoBarLastCode) return; // no change
      __infoBarLastCode = productCode;

      if (__infoBarCache[productCode]) {
        renderInfoBar(__infoBarCache[productCode]);
        return;
      }
      $.get(INFO_BAR_URL, { code: productCode }, function(resp) {
        if (resp && resp.stock !== undefined) {
          __infoBarCache[productCode] = resp;
          renderInfoBar(resp);
        }
      });
    }

    function renderInfoBar(d) {
      $('#pib-stock').text(parseFloat(d.stock || 0).toFixed(0));
      $('#pib-ppp').text(d.ppp || 0);
      $('#pib-last-purchase').text(parseFloat(d.last_purchase || 0).toFixed(2));
      $('#product-info-bar').css('display', '');
    }

    function recalcInfoBarTotals() {
          let totalItems = 0;
          let totalQty = 0;
          $('#table_products tbody tr:not(.template-row)').each(function() {
            const $r = $(this);
            let code = ($r.find('.code-input').val() || '').trim();
            if (!code) {
              const selCode = $r.find('.name-select').data('product_code');
              if (selCode) code = String(selCode);
            }
            if (!code) return; // skip rows without product

            totalItems++;
            const q = parseFloat($r.find('.qty-input').val()) || 0;
            const b = parseFloat($r.find('.bonus-input').val()) || 0;
            totalQty += (q + b);
          });
          $('#pib-total-items').text(totalItems);
          $('#pib-total-qty').text(totalQty % 1 === 0 ? totalQty : totalQty.toFixed(2));

          // Show bar if at least one item exists
          if (totalItems > 0) {
            $('#product-info-bar').css('display', '');
          }
        }

    // Update bar when any row input is focused
    $('#table_products').on('focusin', 'input, select', function() {
      const $row = $(this).closest('tr');
      if ($row.hasClass('template-row')) return;
      let code = ($row.find('.code-input').val() || '').trim();
      if (!code) {
        const selCode = $row.find('.name-select').data('product_code');
        if (selCode) code = String(selCode);
      }
      if (code) updateInfoBar(code);
    });

});
</script>
{% endblock %}